<template>
  <div class="main">
    <div class="left"></div>
     <div id="lineChart" style="width: 1500px; height: 72vh" class="right"></div>
  </div>
 
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
  LineChart,
  CanvasRenderer,
]);
import VChart, { THEME_KEY } from "vue-echarts";
export default {
  name: "HelloWorld",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "write",
  },
  data() {
    return {
      myChart: "",
      pointName:"",
      data:[],
      option: {
        title: {
          text: "巡检温度检测",
        },
        legend: {
          data: ["温度"],
        },
        xAxis: {
            name: "时间",
          nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
          type: "category",
          boundaryGap: false,
          data: [], // 绑定实时数据数组
        },
        yAxis: {
          name:"温度",
             nameTextStyle: {
            fontWeight: 600,
            fontSize: 18,
          },
          type: "value",
          axisLabel: {
            formatter: "{value} ℃",
          },
          axisPointer: {
            snap: true,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: '',
            type: "line",
            smooth: true,
            data:[], // 绑定实时数据数组
          },
        ],
      },
    };
  },
  mounted() {
     this.$nextTick(() => {
        this.init();
      })

  },
  created() {
    this.getTem();
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          this.init();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },

  methods: {
    //格式化数据库的时间，格式化数据库Datetime
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("lineChart"));
      // 根据this.option的数据绘制图表
      this.myChart.setOption(this.option, true);
    },
    getTem() {
      this.$axios
        .get("/inspection/getAllInspectionInformation")
        .then((res) => {
          // console.log(res.data)
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].MTime = this.timestampToTime(res.data[i].MTime);
          }
          for (var j = 0; j < res.data.length; j++) {
            this.pointName = res.data[j].name
            this.option.series[0].name = res.data[j].name
            this.option.xAxis.data[j] = res.data[j].MTime;
            this.option.series[0].data[j] = res.data[j].Roller_MaxTemp;
            this.option.series[0].data[j] = parseInt(
              this.option.series[0].data[j]
            );
          }
        // console.log(this.option.xAxis)
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.main{
  padding: 0;
  margin: 0;
  width: 1660px;
  height: 800px;
  display: flex;
}
.left{
  height: 100%;
  width: 300px;
  border: black 1px solid;
}
.right{
  margin-left: 80px;
}
</style>